<template>
  <yk-layout-page>
    <yk-layout-page-item>
      <yk-table title="单元格编辑--键盘事件功能" :table="state.table" :columns="state.table.columns" :isShowPagination="false"
        :listTypeInfo="state.table.listTypeInfo" isShowFooterBtn isKeyup @save="save" @handleEvent="handleEvent" />
    </yk-layout-page-item>
  </yk-layout-page>
</template>

<script setup lang="ts">
import { reactive } from "vue"
// 保存
const save = tableData => {
  console.log("最终Table数据", tableData)
}
// 编辑单元格监听事件
const handleEvent = (type, val, index) => {
  console.log(`自己标识编辑单元格event值：${type}---修改后的值：${val}----当前所在行：${index}`)
}

let state: any = reactive({
  table: {
    // 接口返回数据
    data: [],
    // 表头数据
    columns: [
      {
        prop: "area1",
        label: "装炉位置",
        minWidth: "120",
        canEdit: true,
        configEdit: {
          label: "装炉位置",
          type: "select-arr",
          editComponent: "el-select",
          list: "furnaceAreaList",
          arrLabel: "label",
          arrKey: "key",
          event: "装炉位置area"
        }
      },
      {
        prop: "layer1",
        label: "装炉层",
        minWidth: "120",
        canEdit: true,
        configEdit: {
          label: "装炉层",
          type: "select-arr",
          editComponent: "el-select",
          list: "furnaceLayerList",
          arrLabel: "label",
          arrKey: "key"
          // event: '装炉层layer',
        }
      },
      {
        prop: "isTail1",
        label: "是否尾包",
        minWidth: "60",
        canEdit: true,
        configEdit: {
          label: "是否尾包",
          type: "checkbox",
          editComponent: "el-checkbox"
        }
      },
      {
        prop: "packageNumStart1",
        label: "开始编号",
        minWidth: "100",
        canEdit: true,
        configEdit: {
          label: "开始编号",
          type: "input",
          editComponent: "el-input"
        }
      },
      {
        prop: "packageNumEnd1",
        label: "结束编号",
        minWidth: "100",
        canEdit: true,
        configEdit: {
          label: "结束编号",
          type: "input",
          editComponent: "el-input"
        }
      },
      { prop: "startDate", label: "生产日期", minWidth: "100" },
      { prop: "endDate", label: "出炉日期", minWidth: "100" },
      {
        prop: "singleWeight1",
        label: "单包重量（吨）",
        minWidth: "160",
        canEdit: true,
        configEdit: {
          label: "单包重量（吨）",
          type: "input",
          editComponent: "el-input-number",
          event: "singleWeight"
        }
      }
    ],
    listTypeInfo: {
      furnaceAreaList: [
        {
          label: "炉头",
          key: "1"
        },
        {
          label: "炉中",
          key: "2"
        },
        {
          label: "炉尾",
          key: "3"
        }
      ],
      furnaceLayerList: [
        {
          label: "上层",
          key: "1"
        },
        {
          label: "中层",
          key: "2"
        },
        {
          label: "下层",
          key: "3"
        }
      ]
    }
  }
})

let resData = [
  {
    area1: "",
    singleWeight: 1.0,
    endDate: "2022-06-06",
    updateBy: "jiangyx",
    createByName: "姜宇轩",
    remark: null,
    isDeleted: false,
    packageNumStart1: null,
    packageNumEnd1: null,
    createTime: "2022-06-06 09:44:17",
    isTail: false,
    startDate: "2022-06-06",
    workOrderBatchRecordId: 96,
    layer1: "",
    id: 104,
    updateByName: "姜宇轩",
    updateTime: "2022-06-06 11:05:49",
    code: "FJSMH1000106",
    isPrint: true,
    ids: [2228, 2229, 2230]
  },
  {
    area1: "",
    singleWeight: 1.0,
    endDate: "2022-06-06",
    updateBy: "libowen",
    createByName: "李博文",
    remark: null,
    isDeleted: false,
    packageNumStart1: null,
    packageNumEnd1: null,
    createTime: "2022-06-08 08:37:34",
    isTail: false,
    startDate: "2022-06-06",
    workOrderBatchRecordId: 96,
    layer1: "",
    id: 105,
    updateByName: "李博文",
    updateTime: "2022-06-08 08:37:34",
    code: "FJSMH1000106",
    isPrint: true,
    ids: [2231, 2232, 2233, 2234, 2235]
  },
  {
    area1: "",
    singleWeight: 1.0,
    endDate: "2022-06-06",
    updateBy: "libowen",
    createByName: "李博文",
    remark: null,
    isDeleted: false,
    packageNumStart1: null,
    packageNumEnd1: null,
    createTime: "2022-06-08 08:53:43",
    isTail: false,
    startDate: "2022-06-06",
    workOrderBatchRecordId: 96,
    layer1: "",
    id: 106,
    updateByName: "李博文",
    updateTime: "2022-06-08 08:53:43",
    code: "FJSMH1000106",
    isPrint: true,
    ids: [2236, 2237, 2238, 2239, 2240]
  }
]
state.table.data = resData
</script>
